<!--停开申请-->
<template>
  <div class="gas-apply-for-box">
    <!-- 审核中 -->
    <div class="audit-box">
      <div class="con-box auditContent">
        <div class="icon"></div>
        <dl>
          <dt>审核中</dt>
          <dd>请耐心等待，可随时关注审核进度</dd>
        </dl>
      </div>
      <div class="return">返回</div>
    </div>
    <!-- 审核通过  -->
    <!-- <div class="audit-pass">
      <div class="logo"></div>
      <div class="con-box auditContent">
        <div class="headerImg">
          <img src="../../static/image/rqghIcon.png" />
        </div>
        <div class="name">张三丰</div>
        <ul>
          <li>
            <em>工号</em>
            <span>007</span>
          </li>
          <li>
            <em>电话</em>
            <span>15012345678</span>
          </li>
        </ul>
      </div>
    </div> -->
    <!--  -->
    <!-- <div class="con-box detailContent">
      <div class="primary-tit title">申请信息</div>
      <div>
        <tui-form ref="form">
          <tui-input label="用户姓名" :required="true" :lineLeft="false" placeholder="请输入用户姓名" v-model="formData.name"></tui-input>
          <tui-input label="联系电话" :required="true" :lineLeft="false" type="number" placeholder="请输入联系电话" v-model="formData.phone" maxlength="11"></tui-input>
          <tui-textarea label="详细说明" :borderTop="false" placeholder="请输入详细说明" v-model="formData.content"></tui-textarea>
          <view class="tui-btn__box">
            <tui-button height="84rpx" @click="submit" :disabled="loading" :loading="loading">提交</tui-button>
          </view>
        </tui-form>
      </div>
    </div> -->
  </div>
</template>

<script>
const rules = [{
  name: "name",
  rule: ["required"],
  msg: ["请输入姓名"]
  // }, {
  //   name: "address",
  //   rule: ["required"],
  //   msg: ["请输入地址"]
}, {
  name: "phone",
  rule: ["required", "isMobile"],
  msg: ["请输入手机号", "请输入正确的手机号"]
}];
export default {
  name: 'Detail',
  components: {
  },
  data () {
    return {
      title: null,
      openid: 'oi8TY6O8cwzuaSky6VNq214MHjVs',
      formData: {
        openid: '',
        name: '',
        // address: '',
        phone: '',
        content: '',
      },
      rules: rules,
      loading: false
    };
  },
  async onShow () {

  },
  async onLoad (e) {
    var vm = this;
    vm.title = e.title
    // vm.getStatus()
  },
  created () {
  },
  methods: {
    getStatus () {
      var vm = this;
      vm.tui.request('/api/workcard/list', 'post', { openid: vm.openid }, false, false, true, true).then((res) => {
        if (res.code == 200) {

        }
      }).catch((e) => { })
    },
    submit () {
      var vm = this;
      if (!vm.$refs.form) return;
      vm.$refs.form.validate(vm.formData, vm.rules).then(res => {
        console.log(vm.formData)
        vm.formData.openid = vm.openid
        vm.loading = true
        // setTimeout(() => {
        //   vm.loading = false
        //   vm.formData.name = ''
        //   vm.formData.address = ''
        //   vm.formData.phone = ''
        //   vm.formData.content = ''
        // }, 1000);
        vm.tui.request('/api/gasstop/add', 'post', vm.formData, false, false, true, true).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              icon: "success",
              title: '添加成功'
            });
            vm.loading = false
          }
        }).catch((e) => { })
      }).catch(errors => {
        console.log(errors)
      })
    }
  },
  mounted () {
    var vm = this;
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/module.scss";
.gas-apply-for-box {
  height: 100%;
  // padding-bottom: 20px;
  box-sizing: border-box;
  .boxTitle {
    margin: 10px 14px;
  }
  .detailContent,
  .tips {
    padding: 0 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 22px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 30px;
      padding-left: 14px;
      line-height: 30px;
      font-size: 17px;
      font-weight: bold;
      color: #222;
      box-sizing: border-box;
      margin: 10px 0;
    }
    :v-deep .tui-textarea__wrap,
    :v-deep .tui-input__wrap {
      padding: 12px 0 12px 8px !important;
    }
    :v-deep .tui-placeholder,
    :v-deep .tui-textarea__label,
    :v-deep .tui-textarea__self,
    :v-deep .uni-input-placeholder,
    :v-deep .tui-input__label,
    :v-deep.tui-input__self {
      font-size: 15px !important;
      uni-text,
      text {
        font-size: 15px !important;
      }
    }
    :v-deep.tui-textarea__wrap {
      align-items: flex-start !important;
    }
    :v-deep .tui-input__required {
      left: 0;
      top: 45%;
    }
    .tui-btn__box {
      padding-top: 30px;
    }
  }
  :v-deep .tui-form__errmsg {
    left: 14px;
    right: 14px;
  }
  // 审核中
  .audit-box {
    width: 100%;
    overflow: hidden;
    background: url("https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/icon/auditBj.png")
      center 20% no-repeat;
    background-size: contain;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 80px;
      background: #1462ff;
      z-index: 0;
    }
    .con-box {
      box-shadow: 0 6px 10px #e7e7e7;
    }
    .auditContent {
      height: 420px;
      margin: 30px 14px 14px;
      padding: 80px 0 0;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      .icon {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background: url("../../static//image/auditIcon.png") center no-repeat;
        background-size: contain;
      }
      dl {
        text-align: center;
        dt {
          padding: 30px 0 16px;
          font-size: 20px;
          color: #222;
        }
        dd {
          font-size: 14px;
          color: #888;
        }
      }
    }
    .return {
      height: 46px;
      line-height: 46px;
      text-align: center;
      font-size: 15px;
      color: #fff;
      border-radius: 50px;
      background: #1462ff;
      box-shadow: 0 2px 10px #1462ff;
      margin: 50px 14px 0;
    }
  }
  // 审核通过
  .audit-pass {
    height: 100%;
    .logo {
      height: 70px;
      margin: 30px 0 0 14px;
      background: url("../../static/image/chinaGasLogo.png") left center
        no-repeat;
      background-size: 38%;
      position: relative;
    }
    width: 100%;
    overflow: hidden;
    background: url("https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/icon/auditBj.png")
      center 40% no-repeat;
    background-size: contain;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 280px;
      background: #1462ff;
      z-index: 0;
    }
    .con-box {
      box-shadow: 0 6px 10px #acacac;
    }
    .auditContent {
      height: calc(100% - 214px);
      margin: 100px 14px 0;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      background: #fff
        url("https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/contentImg/icon/auditCardBj.png")
        center bottom no-repeat;
      background-size: 100%;
      border-radius: 20px;
      .headerImg {
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 0 6px #fff, 0 0 0 16px rgba(162, 162, 162, 0.2);
        // border: 8px solid rgba(255, 255, 255, 1);
        // box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        overflow: hidden;
        position: relative;
        top: -50px;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        text-align: center;
        font-size: 28px;
        color: #1462ff;
      }
      ul {
        width: 42%;
        margin: 24px auto 0;
        font-size: 15px;
        color: #444;
        line-height: 34px;
        padding: 0;
        li {
          padding-bottom: 12px;
          &:last-child {
            padding: 0;
          }
        }
        em,
        span {
          font-style: normal;
          display: block;
        }
        em {
          font-size: 15px;
          color: #888;
        }
        span {
          font-size: 20px;
          color: 222;
        }
      }
    }
  }
}
</style>
<style>
page {
  width: 100%;
  height: 100%;
}
</style>